<template>
  <!-- 搜索框 -->
  <div class="searchHead">
    <div class="headLeft" @click="$router.go(-1)">
      <Svgview ion="#icon-zuojiantou" />
    </div>
    <div class="headCenter">
      <van-search v-model="searValue" shape="round" background="rgb(254,250,250)" :placeholder="defVal"
        @search='searMusic' />
    </div>
    <div class="headRight" @click="searMusic">
      搜索
    </div>
  </div>
  <!-- 标签 -->
  <div class="searchTab">
    <div v-for="item in tabs" :key="item.icon">
      <svgview :ion="item.icon" />
      <p>{{ item.name }}</p>
    </div>
  </div>
  <!-- 历史记录 -->
  <div class="searchHistory" v-if="historySearch">
    <div class="tit">
      <p>历史</p>
      <Svgview ion='#icon-shanchu' @click="delHistory" />
    </div>
    <div class="history">
      <div class="van-ellipsis" v-for="item in historySearch" :key="item" @click="history(item)">{{ item }}</div>
    </div>
  </div>
  <!-- 榜单 -->
  <div class="announcement">
    <van-swipe :loop="false" :width="250" :show-indicators="false">
      <van-swipe-item v-for="item in announcement" :key="item.name">
        <div class=" actItem">
          <div class="itemHeader">
            <h3>{{ item.name }}</h3>
            <span class="play" v-if="item.name == '热搜榜'">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-24gf-play"></use>
              </svg>
              <p>播放</p>
            </span>
          </div>
          <div class="line">
            <van-divider />
          </div>
          <div class="itemContent">
            <div v-for="(val, i) in item.data" class="item">
              <div :style="{ color: i + 1 <= 3 ? 'red' : '' }">{{ i + 1 }}</div>
              <span class="van-ellipsis">{{ val.searchWord || val.title }}</span>
              <img :src="val.iconUrl" v-if="val.iconType == 1">
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup>
import Svgview from "@/components/SvgView";
import { onMounted, ref } from "vue";
import { getSearch, getHot, getTopic } from "@/assets/axios/api";
const searValue = ref(""); //搜索值
const defVal = ref(""); //搜索框默认值
const announcement = ref({})//榜单
const historySearch = ref(JSON.parse(localStorage.getItem('search')))
const tabs = [
  {
    icon: '#icon-renwu-ren',
    name: '歌手'
  }, {
    icon: '#icon-yinleyule',
    name: '曲风'
  }, {
    icon: '#icon-tinggeshiqu',
    name: '专区'
  }, {
    icon: '#icon-yuyin',
    name: '识曲'
  }
]
//搜索框
const searMusic = async () => {
  if (searValue.value.trim()) {
    let res = await getSearch(searValue.value);
    if (!localStorage.getItem('search')) {
      localStorage.setItem('search', JSON.stringify([searValue.value]))
    } else if (JSON.parse(localStorage.getItem('search')).length >= 5 && !JSON.parse(localStorage.getItem('search')).includes(searValue.value)) {
      let a = JSON.parse(localStorage.getItem('search'))
      a.push(searValue.value)
      a.splice(0, 1)
      localStorage.setItem('search', JSON.stringify(a))
    } else if (JSON.parse(localStorage.getItem('search')).includes(searValue.value)) {
      let a = JSON.parse(localStorage.getItem('search'))
      a.splice(a.indexOf(searValue.value), 1)
      a.push(searValue.value)
      localStorage.setItem('search', JSON.stringify(a))
    } else {
      let a = JSON.parse(localStorage.getItem('search'))
      a.push(searValue.value)
      localStorage.setItem('search', JSON.stringify(a))
    }
    console.log(res.data);
  }
  searValue.value = ''
  historySearch.value = JSON.parse(localStorage.getItem('search'))
};
//删除历史记录
const delHistory = () => {
  localStorage.removeItem('search')
  historySearch.value = ''
}
//点击历史记录
const history = async (item) => {
  searValue.value = item
  let res = await getSearch(searValue.value);
  console.log(res.data);
}
onMounted(async () => {
  //获得默认搜索提示
  let resHot = await getHot();
  announcement.value.hotSearch = { name: '热搜榜', data: resHot.data.data }
  let resTopic = await getTopic()
  announcement.value.topic = { name: '话题榜', data: resTopic.data.hot }
  console.log(announcement.value);
});


</script>

<style scoped lang="less">
.searchHead {
  background-color: white;
  display: flex;
  justify-content: space-between;
  justify-items: center;
  height: 50px;
  width: 100%;
  padding: 10px;
  position: fixed;
  z-index: 1;

  .headLeft {
    line-height: 40px;

    .icon {
      width: 20px;
      height: 20px;
    }
  }

  .headCenter {
    display: flex;
    justify-items: center;

    .van-search {
      padding: 0;
      width: 290px;
    }
  }

  .headRight {
    line-height: 30px;
  }
}

.searchTab {
  padding-top: 50px;
  align-items: center;
  display: flex;
  height: 80px;
  background-color: white;

  div {
    flex: 1;
    display: flex;
    align-items: center;
    border-right: 1px solid silver;
    justify-content: center;

    &:last-child {
      border-right: none;
    }

    .icon {
      width: 15px;
      height: 15px;
      fill: red;
    }

    p {
      font-size: 12px;
    }
  }
}

.searchHistory {
  margin-top: 15px;

  .tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 15px;

    .icon {
      fill: silver;
    }
  }

  .history {
    display: flex;
    align-items: center;
    margin-top: 5px;

    div {
      background-color: white;
      text-align: center;
      padding: 2px 15px;
      margin: 0 5px;
      border-radius: 30px;
    }
  }
}

.announcement {
  margin-top: 10px;

  :deep(.van-swipe-item) {
    display: flex;
    justify-content: center;
  }

  .actItem {
    width: 230px;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 60px;

    .itemHeader {
      // margin-top: 10px;
      margin: 5px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .play {
        font-size: 0.24rem;
        border-radius: 15px;
        border: 1px silver solid;
        padding: 0 8px;
        height: 20px;
        line-height: 20px;
        margin-right: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 5px;

        .icon {
          width: 10px;
          height: 10px;
          margin-right: 0;
        }
      }
    }

    .line {
      margin: 0 auto;
      width: 90%;
      margin-top: 10px;

      :deep(.van-divider) {
        margin: 0;
      }
    }

    .itemContent {


      .item {
        display: flex;
        align-items: center;
        margin: 10px;

        img {
          width: 25px;
          margin-left: 5px;
        }

        div {
          font-weight: bold;
          width: 10px;
          text-align: center;
          margin: 0 10px;
        }

        span {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
